* {
    margin: 0;
    padding: 0;
}

@font-face{
    font-family: "NeueHaasUnicaW06Regular";
    src: url("7250d52844cced73ed70675d1b78c60c.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}

@font-face{
    font-family: "NeueHaasUnicaW06Italic";
    src: url("0aa6b2719638cacfa0e8abce9099a39b.woff") format("woff");
    font-weight: normal;
    font-style: italic;
}

body {
    font-family: "NeueHaasUnicaW06Regular";
    line-height: 1.4em;
    font-size: 14px;
  -webkit-text-size-adjust: 100%;
}




body, html {
    margin: 0;
    padding: 0;
    height: 100%;
}


body {
  text-size-adjust: none;
}


html {
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
}








.logo {
    height: 70px;
    width: auto;
    padding-top: 15px;

}

.container {
    height: 100%;
    /* padding-top: 15px; */
    padding-left: 10px;

    position: absolute;
    top: 0;
    right: 0;
    transition: width 0.2s;


    text-align: right;

}

.nav-row {
    display: flex;
    flex-direction: row-reverse;
    margin-right: 0px;
    text-align: right;

}

.nav-item {
    margin: 8px;
}
.nav-item:hover{
    color: forestgreen;
}

ul {
    list-style: none;
    margin: 0px;

}

.sub-list {
    display: none;
    flex-direction: column;
    margin-right: 8px;
}

.sub-list a {
    text-align: right;
}

.sub-list.active {
    max-height: 5000px; /* Adjust as needed */
    display: flex;
    flex-direction: column;
}

div.filter-options {
    margin-right: 0px;
    margin-top: 2px;
    margin-bottom: 16px;
}

@media (max-width: 450px) {
    .filter-options {

        left: 60%;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
      }
  }




label:not(:last-child) {
    margin-right: 8px;
}
  



/* .content {
    padding: 0px;
    padding-right: 77px;
    max-height: 0;
    top: 0px;
    background-image: linear-gradient(#dddcdc, white);
    transition: max-height 0.2s ease-out;
    /* overflow: hidden; */



.collapsible {
    display: inline-block;
    text-align: right;
    width: 100%;


}

.collapsible[style*="none"] {
    display: none; /* Hide elements that are filtered out */
}

.collapsible-name:hover {
    color: forestgreen;
}

.collapsible.active {
    text-align: right;
    width: 100%;
    /* background:rgba(128, 128, 128, 0.755); */
    transition: max-height 0.3s ease-out;
    /*color: white; */
    /* border-top: solid 1px black;
    border-bottom: solid 1px black; */
    color: green;
    height: 100%;
}

.collapsible-name {
    display: flex;
    flex-direction: row-reverse;
    cursor: pointer;
	    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
}

.date{
    width: 77px;
    min-width: 77px;
}

.content {
    display: none;
    overflow: hidden;
    margin-right: 77px;
    transition: max-height 0.3s ease-out;
    color: black;
}

.imgcontent {
    display: inline-block;
    justify-content: right;
    flex-direction: column;
    right: 0px;
    max-width: 50%;
    margin-left: 8px; 
    margin-left: 20%;
    margin-bottom: 0px;
}

.collapsible.active .content {
    display: inline-block;
    margin-bottom: 7px;
    transition: max-height 0.3s ease-out;
    margin-top: -2px;
}



.thumbnail-gallery {
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: wrap;
    margin-bottom: -8px;
    margin-top: 5px;
}

.thumbnail {
    overflow: hidden;
    width: 48px;
    height: 48px;
    margin-left: 8px;
    margin-bottom: 8px;
    cursor: pointer;
}

.thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%);
    box-shadow: 7px 6px 28px 1px rgba(0, 0, 0, 0.24); 

}



.thumbnail.active img.active {
    filter: invert(1);
    border-style: solid;
    border-width: 1px;
    border-color: black;
    transform: scale(0.95); 
    border-radius: 30px;
  }



.thumbnail img:hover {
    filter: invert(1);
}

.thumbnail-collapsible {
    /* display: block; */
    display: none;
    overflow: hidden;
    background: white;

    /* align-items: right; */
    /* justify-content: right; */
    transition: max-height 0.2s ease-out;
    min-height: 200px;


}


.thumbnail-collapsible img {
    max-width: 100%;


    max-height: 80%;
    background-color: white;
}

@media (max-width: 900px) {
    .thumbnail-collapsible img {
        max-width: 100%;
        margin-top: 8px;
        margin-left: 8px;
    
        max-height: 80%;
        background-color: white;
    }
  }

.legend {
    margin-top: -4px;
    margin-bottom: 0px;
    font-size: 12px;
    line-height: 1.2em;
    background-color: white;

    width: auto;
    text-align: right;
    justify-content: right;

}

p.title {
    font-style: italic;
    display: inline;
    line-height: 1.2em;
}


.thumbnail-collapsible.opened-thumbnail-collapsible-wide .legend {

    text-align: right;
    justify-content: right;
    width: auto;

}

.opened-thumbnail-collapsible-wide {
    /* Position the content on the right side of the left half of the screen */
    position: fixed;
    top: 25px; /* Adjust as needed */
    left: 46%; /* Move it to the middle of the screen */
    transform: translateX(-100%); /* Move it back to the left by half of its own width */
    /* width: 40%; /* Set width to occupy half of the screen */
    width: auto;
    max-width: 40%;
    max-height: 94%;
    overflow-y: auto; /* Allow vertical scrolling if content exceeds height */
    /* background-color: #fff; */

    /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); */
    /* box-shadow: 0px 0px 18px 14px white, rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset; */
    /* box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px; */
    /* box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset; */
    box-shadow:0px 0px 10px 8px rgba(255, 255, 255, 0.70), rgba(0, 0, 0, 0.5) 0px 22px 70px -4px;
    z-index: 9999;
    background-color: white;

}

.opened-thumbnail-collapsible-wide img {

    max-width: 100%;
    max-height: 650px;
    

}

video {
    object-fit: scale-down;
}




/* Style for text-container */
.text-container {
    display: none;
}

/* Style for text-container when collapsible is active */
.collapsible.active .text-container {
    display: block;
    position: fixed;
    top: -15px;
    left: 50%;
    transform: translateX(-100%);
    /* border: 2px solid black; */
    padding: 20px;
    max-width: 800px;

    z-index: 9999;
    font-size: 25px;
    line-height: 1.1em;
    color: black;
    overflow-y: auto;
    max-height: 99%;
}

@media (max-width: 1000px) {
    .collapsible.active .text-container.active {
        display: none;
    }
  }



  .checkbox {
    background-color: white;
    width: 16px;
    height: 15px;
    border: 2.6px solid black;
    margin-top: 3px;
    margin-left: 95.4%;

  }



.multiple-choice p {
    margin-right: 50px;
    margin-top: -24px;
}


sup {
    font-size: 14px;
    line-height: 1em;
}

.sup2 {
    font-size: 10px;
    line-height: 1em;
}

.footnotes {
    font-size: 14px;
    line-height: 1.2em;
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
}

.num {
    display: inline;
    flex-direction: row-reverse;
}

.footnotes2 {
    font-size: 14px;
    line-height: 1.2em;
    flex-direction: row-reverse;
    display: flex;
}



.italic {
    font-style: italic;
}

.italic2 {
    font-style: italic;
    font-size: 14px;
    line-height: 1.2em;
    margin-left: 35%;
}

span.italic2 {
    display: block;
    line-height: 1.2em;
}


.note-container {
    direction: rtl;
    text-align: justify;
    font-size: 14px;
    line-height: 1.2em;
}

.note {
    text-align: right;
    margin-bottom: 10px; /* Adjust spacing between notes as needed */
    position: relative;

}

  .note2 {
    text-indent: 30px;
}

.note::before {
    content: attr(data-note-number) ".";
    position: absolute;
    top: 0;
    right: 0;
    margin-left: 10px; /* Adjust spacing between line number and text as needed */

}

.language-switch {
    /* Add your desired styles for the button */
    /* padding: 10px 20px; */
    /* background-color: green; */
    padding: 3px;
    background-color: white;
    color: green;
    border: 1px solid white;
    border-radius: 18px;
    cursor: pointer;
    position: absolute;
    left: 1%;
    font-size: 25px;
    top: 17px;
}

.language-switch:hover {
    /* Add styles for when the button is hovered */
    /* background-color: #0056b3;*/
    background-color: #b8babc;
}

.language-switch:focus {
    /* Add styles for when the button is focused (clicked or tabbed into) */
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.5); /* Example box shadow for focus */
}